<template>
  <div class="lover-container">
    <van-nav-bar title="chatGPT">
      <template #left>
        <span @click="$router.back()">
          <svg-icon style="margin-left: 10px;" icon-class='fanhui' width="30px" height="30px" class="icon"/>
        </span>
      </template>
    </van-nav-bar>

    <!-- 中间 聊天内容区域 -->
    <div class="main">
      <div v-for="(item,index) in chatDataArr" :key="index">
        <div class="leftPerson msg" v-if="item.id!==userInfo.id">
          <van-image round width="1rem" height="1rem" fit="cover" :src="require('@/assets/robot.png')"/>
          <div class="conWrap">
            <div class="content">
              {{ item.content }}
            </div>
            <div class="msgTime">{{ item.time|toTime }}</div>
          </div>

        </div>
        <div class="rightPerson msg" v-if="item.id===userInfo.id">
          <van-image
            round
            width="1rem"
            height="1rem"
            fit="cover"
            :src="userInfo.user_pic"
          />
          <div class="conWrap">
            <div class="content">
              {{ item.content }}
            </div>
            <div class="msgTime">{{ item.time |toTime }}</div>
          </div>
        </div>

      </div>
      <!-- 底部 消息编辑区域 -->
      <div class="foot">
        <div class="inputBox">
          <input type="text" class="sendMsg" v-model="sendMsg" placeholder="您可以尽情问我 您想知道的一切">
          <span @click="send">
            <svg-icon style="margin-left: 10px;" icon-class='aixin' width="30px" height="30px" class="icon"/>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
import dayjs from 'dayjs'

export default {
  name: 'gptIndex',
  data () {
    return {
      userInfo: {},
      loverInfo: [],
      chatDataArr: [],
      sendMsg: '',
      moreShow: false
    }
  },
  filters: {
    // 定义局部过滤器
    toTime (time) {
      const today = dayjs()
      const createTime = dayjs(time)
      if (today.diff(createTime, 'day') > 0) {
        // 时间早于今天
        return createTime.format('MM-DD HH:mm')
      } else {
        // 时间等于或晚于今天
        return createTime.format('HH:mm')
      }
    }
  },
  created () {
    this.loadUserInfo()
  },
  /* socket是监听服务器发布的自定义事件 */
  sockets: {
    /* 监听welcome事件 */
    welcome: function (data) {
      console.log('welcome data 数据返回 = >', data)
      this.chatDataArr.push(data)
    }
  },
  methods: {
    // 请求用户信息
    async loadUserInfo () {
      try {
        const res = await getUserInfoAPI()
        console.log(res)
        this.userInfo = res.data.data
        this.loverInfo = res.data.loverData
        this.chatDataArr = []
      } catch (error) {
        console.log(error)
      }
    },
    send () {
      this.chatDataArr.push({
        content: this.sendMsg,
        img: this.userInfo.user_pic,
        time: new Date(),
        id: this.userInfo.id
      })
      fetch(`https://apis.tianapi.com/robot/index?key=c11a19c8088cd1833a55587b1eb8bb87&question=${this.sendMsg}`)
        .then(response => response.json())
        .then(data => {
          console.log(data.result.reply)
          this.chatDataArr.push({
            content: data.result.reply,
            time: new Date(),
            id: 0
          })
          this.sendMsg = ''
        })
        .catch(error => console.error(error))
    }
  }
}
</script>

<style scoped lang="less">
.lover-container {
  height: 100vh;
  background-color: #f6f6f6;

  .van-nav-bar {
    height: 55px;
    border-radius: 0 0 20px 20px;

    &::after {
      border: none;
    }
  }

  .main {
    padding-bottom: 45px;

    .msg {
      font-size: 13px;
      display: flex;
      padding: 25px 20px 0 20px;
      flex-wrap: wrap;

      .conWrap {

        .content {
          color: black;
          max-width: 200px;
          margin-left: 10px;
          padding: 7px;
          border-radius: 0 10px 10px 10px;
          background-color: #fff;
          letter-spacing: .5px;
          font-family: "微软雅黑", sans-serif;
        }

        .msgTime {
          font-size: 12px;
          padding: 5px 0px 0px 15px;
        }
      }
    }

    .rightPerson {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;

      .conWrap {
        .content {
          color: #fff;
          margin-right: 10px;
          border-radius: 10px 0px 10px 10px;
          background-color: #eb6282;
        }

        .msgTime {
          float: right;
          padding: 5px 15px 0px 0px;
        }
      }
    }
  }

  .foot {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 20px 20px 0px 0px;

    .inputBox {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;

      input {
        font-size: 14px;
        height: 30px;
        padding: 0px 10px;
        width: 200px;
        border: none;
      }
    }

    .moreFun {
      height: 30px;
      transition: all 2s;
    }
  }
}
</style>
